/**
 * 动态排序表格脚本
 * 功能：
 * 1. 点击表头可以按列进行排序（升序/降序）
 * 2. 支持多种数据类型排序（数字、文本）
 * 3. 支持复选框选择行
 */

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 获取表格元素
    const table = document.getElementById('sortable-table');
    const headers = table.querySelectorAll('th.sortable');
    const tbody = table.querySelector('tbody');
    const selectAll = document.getElementById('select-all');
    const rowCheckboxes = document.querySelectorAll('.row-checkbox');
    
    // 当前排序状态
    let currentSort = {
        column: null, // 当前排序的列
        asc: true     // 是否为升序
    };
    
    /**
     * 比较函数 - 根据数据类型返回适当的比较结果
     * @param {*} a - 第一个值
     * @param {*} b - 第二个值
     * @param {boolean} asc - 是否为升序
     * @returns {number} - 比较结果
     */
    function compare(a, b, asc) {
        // 检查是否为数字
        if (!isNaN(a) && !isNaN(b)) {
            a = parseFloat(a);
            b = parseFloat(b);
        } else {
            // 字符串比较
            a = String(a).toLowerCase();
            b = String(b).toLowerCase();
        }
        
        // 根据排序方向返回比较结果
        if (a < b) return asc ? -1 : 1;
        if (a > b) return asc ? 1 : -1;
        return 0;
    }
    
    /**
     * 排序表格
     * @param {number} colIndex - 列索引
     * @param {boolean} asc - 是否为升序
     */
    function sortTable(colIndex, asc) {
        // 获取所有行
        const rows = Array.from(tbody.querySelectorAll('tr'));
        
        // 排序行
        rows.sort((rowA, rowB) => {
            // 获取单元格内容（跳过第一列复选框）
            const cellA = rowA.cells[colIndex].textContent.trim();
            const cellB = rowB.cells[colIndex].textContent.trim();
            
            return compare(cellA, cellB, asc);
        });
        
        // 更新 DOM
        rows.forEach(row => tbody.appendChild(row));
    }
    
    /**
     * 更新排序图标
     * @param {HTMLElement} clickedHeader - 被点击的表头
     */
    function updateSortIcons(clickedHeader) {
        // 移除所有表头的排序类
        headers.forEach(header => {
            header.classList.remove('asc', 'desc');
        });
        
        // 添加当前排序方向的类
        if (currentSort.column === clickedHeader) {
            clickedHeader.classList.add(currentSort.asc ? 'asc' : 'desc');
        }
    }
    
    // 为每个可排序的表头添加点击事件
    headers.forEach((header, index) => {
        header.addEventListener('click', function() {
            // 实际列索引（考虑第一列是复选框）
            const colIndex = index + 1;
            
            // 判断排序方向
            if (currentSort.column === header) {
                // 同一列，切换排序方向
                currentSort.asc = !currentSort.asc;
            } else {
                // 不同列，默认升序
                currentSort.column = header;
                currentSort.asc = true;
            }
            
            // 排序表格
            sortTable(colIndex, currentSort.asc);
            
            // 更新排序图标
            updateSortIcons(header);
        });
    });
    
    // 全选/取消全选
    selectAll.addEventListener('change', function() {
        const isChecked = this.checked;
        
        // 更新所有行复选框
        rowCheckboxes.forEach(checkbox => {
            checkbox.checked = isChecked;
            
            // 更新行选中状态
            const row = checkbox.closest('tr');
            if (isChecked) {
                row.classList.add('selected');
            } else {
                row.classList.remove('selected');
            }
        });
    });
    
    // 单行选择
    rowCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const row = this.closest('tr');
            if (this.checked) {
                row.classList.add('selected');
            } else {
                row.classList.remove('selected');
                // 取消全选状态
                selectAll.checked = false;
            }
            
            // 检查是否全部选中
            const allChecked = Array.from(rowCheckboxes).every(cb => cb.checked);
            selectAll.checked = allChecked;
        });
    });
}); 